<template>
  <div class="edit-page">
    <a-page-header :title="isEdit ? '编辑文章' : '创建文章'" @back="() => $router.go(-1)">
      <template #extra>
        <a-button type="outline" :loading="loading" @click="saveArticle">
          <icon-save /> 保存
        </a-button>
      </template>
    </a-page-header>

    <a-form ref="formRef" :model="form" :layout="vertical">
      <a-form-item
        field="title"
        label="文章标题"
        :rules="[{ required: true, message: '请输入文章标题' }]"
      >
        <a-input v-model="form.title" placeholder="请输入文章标题..." />
      </a-form-item>
      <a-form-item
        field="summary"
        label="文章概要"
        :rules="[
          { required: true, message: '请输入文章概要' },
          { max: 200, message: '文章概要不能超过200个字符' }
        ]"
      >
        <a-input v-model="form.summary" placeholder="请输入文章概要..." />
      </a-form-item>
      <a-form-item
        field="content"
        label="文章内容"
        :rules="[{ required: true, message: '请输入文章内容' }]"
      >
        <MdEditor v-model="form.content" :height="300" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { IconSave } from '@arco-design/web-vue/es/icon' // 导入保存图标
import { MdEditor } from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
import { CREATE_BLOG, GET_BLOG, UPDATE_BLOG } from '@/api/vblog'
import { Notification } from '@arco-design/web-vue'
import { useRouter } from 'vue-router'
import app from '@/stores/app'

const userToken = app.value.token

const isEdit = ref(false) // 初始化 isEdit

const form = ref({
  title: '',
  author: userToken.user_name,
  content: '',
  summary: '',
  created_by: '',
  tags: {}
})

const formRef = ref(null)

// 定义 vertical 属性
const vertical = 'vertical' // 或者可以设置为 true

const loading = ref(false) // 添加 loading 状态
const router = useRouter()

var blogid = ''
const getBlogLodding = ref(false)

watch(
  () => router.currentRoute.value.query.id, // 监听当前路由的 query.id
  async (v) => {
    blogid = router.currentRoute.value.query.id
    if (v) {
      isEdit.value = true // 设置为编辑模式
      try {
        getBlogLodding.value = true // 开始加载状态
        const res = await GET_BLOG(v)
        form.value = res.data
      } finally {
        getBlogLodding.value = false // 结束加载状态
      }
    }
  },
  {
    immediate: true
  }
)

const saveArticle = async () => {
  const isValid = await formRef.value.validate()
  if (!isValid) {
    try {
      loading.value = true // 开始加载状态
      if (isEdit.value) {
        await UPDATE_BLOG(blogid, form.value)

        Notification.success({
          title: '更新成功',
          content: '文章更新成功'
        })
      } else {
        await CREATE_BLOG(form.value)
        Notification.success({
          title: '创建成功',
          content: '文章创建成功'
        })
      }
    } finally {
      // 跳转回列表页
      router.push('list')
      loading.value = false // 结束加载状态
    }
  }
}
</script>

<style lang="css" scoped>
.edit-page {
  display: flex;
  flex-direction: column; /* 垂直排列 */
  height: 100vh; /* 设置高度为视口高度 */
  overflow: hidden; /* 禁止滚动 */
}

.form-container {
  flex: 1; /* 使表单容器填满剩余空间 */
  padding: 20px; /* 添加内边距 */
  overflow: hidden; /* 禁止滚动 */
}
</style>
